<template>
    <div>
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" onClick="javascript :history.back(-1);">
            <span class="resvise_title">注册</span>
        </header>
        <div class="reg_w85">
            <div class="reg_border">
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/register_phone.png" alt="">
                        <input type="text" placeholder="请输入手机号码" v-model="task.user_mobile">
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="task.user_mobile = ''">
                </div>
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/register_code.png" alt="">
                        <input type="text" placeholder="验证码" v-model="task.verification_code">
                    </div>
                    <span class="put_ma" @click="Codes()">{{ codeTime }}</span>
                </div>
            </div>

            <div class="reg_border">
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/register_qq.png" alt="">
                        <input type="text" placeholder="请输入QQ号码" v-model="task.user_qq" >
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="task.user_qq = ''">
                </div>
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/yaoqingma_img.png" alt="">
                        <input type="text" placeholder="请输入邀请码（选填）" v-model="task.user_invite_code">
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="task.user_invite_code = ''">
                </div>
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/password.png" alt="">
                        <input type="text" placeholder="请输入密码" v-model="task.user_password">
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="task.user_password = ''">
                </div>
            </div>

            <div class="reg_btn" @click="users()">注册</div>
            <p class="aggregate">注册即表示同意<span>《用户使用条款及服务协议》</span></p>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "reg",
        data (){
            return {
                task: {
                    verification_key: '',
                    user_password: '',
                    user_qq: '',
                    verification_code: '',
                    user_invite_code: ''
                },
                codeTime: '获取验证码'
            }
        },
        created() {
            localStorage.clear()
        },
        methods: {
            Codes() {
                var _that = this;
                if(_that.codeTime == '获取验证码') {
                    api.request('/verificationCodes', 'post', {user_mobile: this.task.user_mobile,verification_code_type: 1}).then((resp) => {
                        _that.$toast('发送成功')
                        _that.codeTimefun();
                        _that.task.verification_key = resp.data.data.key;
                        // localStorage.setItem('token', resp.data.data.access_token)
                    })
                }else {
                    _that.$toast(_that.codeTime)
                }
            },
            codeTimefun() {
                var time = 10;
                var _that = this;
                var t = setInterval(function (){
                    time--
                    _that.codeTime = time+'秒后获取';
                    if (time == 0){
                        _that.codeTime = '获取验证码'
                        clearInterval(t)
                    }
                }, 1000)
            },
            users() {
                var _that = this;
                api.request('/users', 'post', _that.task).then((resp) => {
                    _that.$toast('注册成功,请关闭此页面重新绑定微信')
                    // setTimeout(function (){
                    //     _that.$router.push({
                    //         path: '/task/Login'
                    //     })
                    // },1000)
                })
            },
        }
    }
</script>

<style scoped="css">
    .reg_w85 {
        width: 95vw;
        margin: 0 auto;
    }

    .reg_w85 ::-webkit-input-placeholder {
        color: #555;
    }

    .reg_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .reg_list > div {
        display: flex;
        align-items: center;
    }

    .reg_list img {
        width: 5vw;
        margin-right: 5vw;
    }

    .reg_list input {
        height: 14vw;
        font-size: 4vw;
        padding-left: 2.5vw;
        border: none;
    }

    .reg_list > div img {
        width: 6vw;
        margin-left: 5.5vw;
        margin-right: 0;
    }

    .put_ma {
        color: #3DA5EF;
        font-size: 4vw;
        margin-right: 5vw;
    }

    .reg_border {
        -webkit-border-radius: 2vw;
        -moz-border-radius: 2vw;
        border-radius: 2vw;
        background: #FFF;
        margin-top: 0.5rem;
    }

    .reg_border:nth-of-type(2) {
        margin-top: 0.6rem;
    }

    .reg_btn {
        width: 100%;
        background: #FF9815;
        text-align: center;
        height: 1.3rem;
        line-height: 1.3rem;
        -webkit-border-radius: 1.5vw;
        -moz-border-radius: 1.5vw;
        border-radius: 1.5vw;
        color: #fff;
        font-size: 4.2vw;
        margin-top: 0.7rem;
    }

    .aggregate {
        color: #848484;
        font-size: 4vw;
        margin-top: 3vw;
    }

    .aggregate span {
        color: #3DA7EF;
    }
</style>
